<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>CSS3 H5 模拟双色球效果</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			header {
				font-weight: bold;
			}
			
			ul {
				list-style: none outside none;
			}
			
			#reddiv {
				width: 660px;
				float: left;
			}
			
			#bluediv {
				width: 400px;
				float: left;
				margin: 0 0 0 60px;
			}
			
			li {
				display: inline-block;
				margin: 8px 5px;
				padding: 5px;
				width: 30px;
				height: 30px;
				font: bold 18px/30px arial;
				border: 1px #ddd solid;
				color: #444;
				border-radius: 31px;
				text-align: center;
				background-image: -webkit-radial-gradient(circle at top, rgb(247, 247, 247), rgb(222, 222, 222));
				background-image: radial-gradient(circle at top, rgb(247, 247, 247), rgb(222, 222, 222));
			}
			
			ul>li:hover {
				cursor: pointer;
				background-image: -webkit-radial-gradient(circle at top, rgb(247, 247, 247), rgb(255, 204, 204));
				background-image: radial-gradient(circle at top, rgb(247, 247, 247), rgb(255, 204, 204));
			}
			
			#reddiv header {
				color: red;
			}
			
			#bluediv header {
				color: blue;
			}
			
			.redball {
				color: #fff;
				background-image: -webkit-radial-gradient(circle at top, rgb(255, 51, 51), rgb(255, 0, 0));
				background-image: radial-gradient(circle at top, rgb(255, 51, 51), rgb(255, 0, 0));
			}
			
			.blueball {
				color: #fff;
				background-image: -webkit-radial-gradient(circle at top, rgb(0, 85, 204), rgb(0, 0, 225));
				background-image: radial-gradient(circle at top, rgb(0, 85, 204), rgb(0, 0, 225));
			}
		</style>
	</head>

	<body>
		<div id="reddiv">
			<header>红球区</header>
			<ul>
				<li>01</li>
				<li>02</li>
				<li>03</li>
				<li>04</li>
				<li>05</li>
				<li>06</li>
				<li>07</li>
				<li>08</li>
				<li>09</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
				<li>13</li>
				<li>14</li>
				<li>15</li>
				<li>16</li>
				<li>17</li>
				<li>18</li>
				<li>19</li>
				<li>20</li>
				<li>21</li>
				<li>22</li>
				<li>23</li>
				<li>24</li>
				<li>25</li>
				<li>26</li>
				<li>27</li>
				<li>28</li>
				<li>29</li>
				<li>30</li>
				<li>31</li>
				<li>32</li>
				<li>33</li>
			</ul>
		</div>
		<div id="bluediv">
			<header>蓝球区</header>
			<ul>
				<li>01</li>
				<li>02</li>
				<li>03</li>
				<li>04</li>
				<li>05</li>
				<li>06</li>
				<li>07</li>
				<li>08</li>
				<li>09</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
				<li>13</li>
				<li>14</li>
				<li>15</li>
				<li>16</li>
			</ul>
		</div>
		<script src="http://cdn.bootcss.com/zepto/1.1.4/zepto.min.js"></script>
		<script>
			Zepto(function($) {
				$('#reddiv ul>li').click(function() {
					$(this).toggleClass('redball');
				})

				$('#bluediv ul>li').click(function() {
					$(this).toggleClass('blueball');
				});
			})
		</script>
	</body>

</html>